<template>
  <div class="bg">
    <div>
      <BlueBox title="作业位置数量" :list="leftlist" />
      <BlueBox class="rightList" title="场内人员信息" :list="rightlist" union="人" />
    </div>
    <TipBox v-for="(item, index) in iconList" :key="index" v-bind="{ ...item }" />
  </div>
</template>

<script>
import TipBox from '@/components/tipBox/index.vue'
import BlueBox from '@/components/blueBox/index.vue'
import isepApi from '@/api/isep'
export default {
  name: 'centerMap',
  components: {
    TipBox,
    BlueBox
  },
  data() {
    return {
      timer: {},
      componentWidth: '',
      componentHeight: '',
      leftlist: [],
      rightlist: [
        {
          dataIndex: 'visitor',
          number: 0,
          name: '访客'
        },
        {
          dataIndex: 'users',
          number: 0,
          name: '员工'
        },
        {
          dataIndex: 'outsourcedTeam',
          number: 0,
          name: '外委队伍'
        }
      ],
      iconList: [
        {
          name: '主厂房机侧',
          title: 0,
          top: '203px',
          left: '299px',
          y: 203,
          x: 299
        },
        {
          name: '主厂房炉侧',
          title: 0,
          top: '83px',
          left: '359px',
          y: 83,
          x: 359
        },
        {
          name: '封闭煤场',
          title: 0,
          top: '0px',
          left: '349px',
          y: 0,
          x: 349
        },
        {
          name: '辅控楼',
          title: 0,
          top: '162px',
          left: '549px',
          y: 162,
          x: 549
        },
        {
          name: '卸煤间',
          title: 0,
          top: '25px',
          left: '632px',
          y: 25,
          x: 632
        },
        {
          name: '物资仓库',
          title: 0,
          top: '49px',
          left: '693px',
          y: 49,
          x: 693
        },
        {
          name: '检修楼',
          title: 0,
          top: '91px',
          left: '856px',
          y: 91,
          x: 856
        },
        {
          name: '办公楼',
          title: 0,
          top: '269px',
          left: '433px',
          y: 269,
          x: 433
        },
        {
          name: '化学楼',
          title: 0,
          top: '269px',
          left: '596px',
          y: 269,
          x: 596
        },
        {
          name: '燃料楼',
          title: 0,
          top: '25px',
          left: '484px',
          y: 25,
          x: 484
        }
      ]
    }
  },
  mounted() {
    this.initData()
    this.initLocationData()
    window.addEventListener('resize', () => this.initData())
    const self = this
    this.timer = function () {
      self.initLocationData()
    }
    setInterval(this.timer, 10000)
  },
  onUnmounted() {
    clearInterval(this.timer)
    this.timer = null
    window.removeEventListener('resize', () => this.initData())
  },
  methods: {
    initData() {
      this.$nextTick(() => {
        this.componentWidth = this.$el.offsetWidth // 获取元素宽度并设置到data中
        this.componentHeight = this.$el.offsetHeight
        this.iconList.forEach((item) => {
          item.left = parseInt((item.x * this.componentWidth) / 1183) + 'px'
          item.top = parseInt((item.y * this.componentHeight) / 385) + 'px'
        })
      })
    },
    initLocationData() {
      isepApi.getPersonWarnInfo().then((res) => {
        for (let i of this.rightlist) {
          i.number = res[i.dataIndex]
        }
      })

      isepApi.getAreaWarnInfo().then((res) => {
        let list = []
        for (let i in res.xdata) {
          const item = {
            name: res.xdata[i],
            number: res.ydata[i]
          }
          this.iconList = this.iconList.map((icon) => {
            if (icon.name == res.xdata[i]) {
              icon.title = res.ydata[i]
            }
            return icon
          })
          list.push(item)
        }
        this.leftlist = list
      })
    }
  }
}
</script>

<style scoped>
.bg {
  background: url('@/assets/isep/center.png') no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: relative;
  .rightList {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
</style>
